<template>
	<div class="cloneContainer">
		<div class="header" style="margin-top: 31px;">
			<a-input v-model:value="searchData['search_AND_LIKE_student.name']" autocomplete="off" :placeholder="t('control', '请输入学生姓名')" style="width: 270px;margin-right: 12px" />
			<a-input v-model:value="searchData['search_AND_LIKE_project.name']" autocomplete="off" :placeholder="t('control', '请输入项目名称')" style="width: 270px; margin-right: 12px" />
			<minDatePicker v-model:value="searchData['search_AND_EQ_student.classStudents.gradeClass.grade.year']" picker="year" :placeholder="t('control', '年级')"
				style="margin-right: 12px; flex: 1;" @handleChange="handleChange" />
			<a-select v-model:value="searchData['search_AND_EQ_student.classStudents.gradeClass.id']" style="flex: 1; margin-right: 12px"
				:placeholder="t('control', '班级')">
				<a-select-option :value="item.id" v-for="item in classStructure">{{ item.name
					}}</a-select-option>
			</a-select>
			<div>
				<a-button type="primary" @click="(pagination.current=1,tableData=[],show())">{{t('control', '查询')}}</a-button>
				<a-button style="margin-left: 10px" @click="(pagination.current=1,searchData = {},classStructure=[],show())">{{t('control', '重置')}}</a-button>
			</div>
		</div>
		<div class="header" style="margin-top: 31px;">
			<div class="group">
				<div @click="()=>{activeName = '已加入';pagination.current=1}" :class="['item', activeName == '已加入' && 'activeItem']">{{t("control", "已加入")}} <a-badge style="margin-left: 3px;" :count="conutGroup.count2 || 0" :number-style="{ backgroundColor: '#FFFFFF', color: '#8466F5', fontSize: '12px',  borderColor: '#8466F5' }"/></div>
				<div @click="()=>{activeName = '待审核';pagination.current=1}" :class="['item', activeName == '待审核' && 'activeItem']">{{t("control", "待审核")}} <a-badge style="margin-left: 3px;" :count="conutGroup.count1 || 0" :number-style="{ borderColor: 'transparent' }" /></div>
			</div>
			<div>
				<!-- <a-button style="margin-left: 10px" @click="handleExport">导出表格</a-button> -->
			</div>
		</div>

		<div class="content">
			
			<div style="flex-grow: 1;overflow: auto;">
				<!-- :row-selection="{
						checkStrictly: false,
						selectedRowKeys: selectedRowKeys,
						onChange: onSelectChange,
					}" -->
				<a-table
					:key="activeName"
					style="height: 0"
					:dataSource="tableData" :columns="columns" :pagination="false">
					<template #bodyCell="{ column, text, record, index }">
						<template v-if="column.dataIndex === 'projectName'">
							<a-tooltip placement="topLeft">
								<template #title>
									<span>{{ text }}</span>
								</template>
								<span style="display: inline-block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
									{{ text }}
								</span>
							</a-tooltip>
						</template>
						<template v-if="column.key === 'operate'">
							<div style="font-size: 20px;">
								<CheckCircleOutlined style="margin-right: 10px;" @click="handleClick({ name: '加入', record, index })" />
								<a-popconfirm placement="topRight" :title="`确认拒绝${record.studentName}加入${record.projectName}项目吗？`" @confirm="handleClick({ name: '拒绝', record, index })">
									<CloseCircleOutlined />
								</a-popconfirm>
							</div>
						</template>
					</template>
				</a-table>
			</div>
			<a-pagination style="text-align: center" @change="show" v-model:current="pagination.current" show-size-changer  v-model:pageSize="pagination.size"
				:total="pagination.totalElements" />
		</div>

	</div>
</template>
<script setup>
import { reactive, ref, watch } from 'vue'
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
import minDatePicker from '@/components/common/minDatePicker.vue'
import { teacherProjectTeamApproved, teacherProjectTeamRejected, teacherProjectTeamMyStudentList, teacherGradeClassFindAll, teacherProjectTeamMyStudentCount } from '@/request/teacher/student/development'
import { message, Modal } from 'ant-design-vue'
import { color } from 'echarts'
import { t } from '@/i18n'
const searchData = ref({})
const pagination = ref({ totalElements: 0, current: 1, size: 10 })
const formModel = ref({})
const formRef = ref()
const modal = reactive({ visible: false, formDisable: false, name: '' })
const rules = {
	name: [
		{ required: true, message: '请输入', trigger: 'change', },
	],
}
const originColumns = [
	{
		title: t('table', '序号'),
		dataIndex: 'index',
		customRender: (record) => record.index + 1,
	},
	{ title: t('table', '学生姓名'), dataIndex: 'studentName', key: 'studentName' },
	{ title: t('table', '学号'), dataIndex: 'studentNum', key: 'studentNum' },
	{ title: t('table', '年级'), dataIndex: 'year', key: 'year' },
	{ title: t('table', '班级'), dataIndex: 'className', key: 'className' },
	{ title: t('table', '项目名称'), dataIndex: 'projectName', key: 'projectName'},
	{ title: t('table', '组别'), dataIndex: 'teamName', key: 'teamName' },
	{ title: t('table', '岗位名称'), dataIndex: 'projectJobName', key: 'projectJobName' },
	// { title: '操作', dataIndex: 'operate', key: 'operate' },
]
const columns = ref([...originColumns])
const tableData = ref([])
const activeName = ref('已加入')
const conutGroup = ref({})
const show = async () => {
	let req = {
		...pagination.value,
		page: pagination.value.current - 1,
		...searchData.value
	}
	console.log(req,'req')
	if (activeName.value == '已加入') req['search_AND_GT_auditStatus'] = 0
	if (activeName.value == '待审核') req['search_AND_EQ_auditStatus'] = 0
	// let res = await teacherProjectTeamMyStudentList(req)
	let res = {
		列表: await teacherProjectTeamMyStudentList(req),
    计数: await teacherProjectTeamMyStudentCount()
  }
	console.log(res)

	if (res['列表']) {
		tableData.value = res['列表'].data.content
		pagination.value = {
			...pagination.value,
			...res['列表'].data.page
		}
	}
	if (res['计数']) {
		conutGroup.value = res['计数'].data
	}
	
}
show()
watch(activeName, () => {
	tableData.value = []
	if (activeName.value == '已加入') columns.value = [...originColumns]
	if (activeName.value == '待审核') columns.value = [...originColumns, { title: '操作', dataIndex: 'operate', key: 'operate', width: 100 }]
	show()
})
const classStructure = ref([])
const handleChange = async (val) => {
	console.log(val)
	if (!val) return classStructure.value = []
	let res = await teacherGradeClassFindAll({'search_AND_EQ_grade.year': val})
	console.log(res, '?')
	if (!res) return classStructure.value = []
	classStructure.value = res.data
}
const selectedRowKeys = ref([])
const onSelectChange = keys => selectedRowKeys.value = keys

const handleClick = async ({ name, record }) => {
	let req = {
		...record
	}, res = null, operate = null
	switch (name) {
		case '加入':
			res = await teacherProjectTeamApproved(req)
			if (!res) return
			message.success('操作成功')
			show()
			break
		case '拒绝':
			operate = await new Promise((resolve, reject) => {
				Modal.confirm({
					content: '请及时通知学生重新选取项目',
					onOk() {
						resolve(true);
					},
					confirmText: '确定',
					cancelText: '取消',
					onCancel() {
						resolve(false);
					},
				})
			})
			if (!operate) return
			res = await teacherProjectTeamRejected(req)
			if (!res) return
			message.success('操作成功')
			show()
			break
	}
}
const handleExport = async () => {
	if (!selectedRowKeys.value.length) return message.info('请选择')
}


</script>

<style lang="scss" scoped>
$mainColor: #a84e91;

.cloneContainer {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;
		border-radius: 10px;
		padding: 0 24px;
		.group {
			background: #FFFFFF;
			border-radius: 4px;
			border: 1px solid #B5ACCE;
			font-weight: 400;
			font-size: 14px;
			display: flex;
		}
		.item {
			min-width: 100px;
			min-height: 32px;
			padding: 5px 16px;
			text-wrap: nowrap;
			border-radius: 2px 0px 0px 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			color: #B5ACCE;
		}
		.activeItem {
			color: #FFFFFF;
			background: #8466F5;
			border: 1px solid #8466F5;
		}
	}

	.content {
		min-height: 0;
		margin-top: 16px;
		padding: 20px;
		overflow: auto;
		flex-grow: 1;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		background: white;
		border-radius: 10px;
	}
}
</style>